<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../fa/css/all.css">
    <style>
        li{
            list-style: none;
        }
        li::before{
            /* 
                通过伪元素设置图标字体
                    1.找到要设置图标的元素通过before或after选中
                    2.在content中设置字符的编码
                    3.设置字体的样式
                    fab:
                        font-family: 'Font Awesome 6 Brands';
                    fas:
                         font-family: 'Font Awesome 6 Free';
                         font-weight: 900;
            */
            content: "\f1b0";
            
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- <i class="fas fa-cat"></i> -->
    <ul>
        <li>锄禾日当午</li>
        <li>活得很辛苦</li>
        <li>谁知盘中餐</li>
        <li>lljqk</li>
    </ul>
    <!-- 
        通过实体使用图标字体,
            &#x图标的编码

     -->
    <span class="fas">&#xf0f3</span>
</body>
</html>